<template>
  <div id="cesiumContainer"></div>
</template>
<script setup lang="ts">
import * as Cesium from 'cesium';
import { onMounted } from 'vue'

onMounted(() => {
  // const viewer = new Cesium.Viewer('cesiumContainer');
  cesiumMap();
})

const cesiumMap = async () => {
  var viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox: false, // 是否显示信息窗口
    animation: false, // 隐藏左下角的仪表盘
    timeline: false,  // 隐藏底部时间轴
    fullscreenButton: true, // 是否显示全屏按钮
    navigationHelpButton: false, //是否显示帮助信息控件
    geocoder: false,  // 是否显示搜索按钮
    baseLayerPicker: false, // 是否显示切换图层按钮
    homeButton: true,  // 是否显示初始化地图按钮
    // terrainProvider: await Cesium.createWorldTerrainAsync({
    //   requestWaterMask: true,
    //   requestVertexNormals: true,
    // })
  });
  //显示地图瓦片
  viewer.imageryLayers.removeAll();

  let imgprov = new Cesium.UrlTemplateImageryProvider({
    // url: '',
    url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
    minimumLevel: 1,
    maximumLevel: 18,
    // tilingScheme: new Cesium.WebMercatorTilingScheme()
  })
  viewer.imageryLayers.addImageryProvider(imgprov)

  const birdNestPosition = {
    longitude: 116.390590,
    latitude: 39.899375,
    height: 2000, // 设置相机高度
  };
  //地图中心点 设置查看器
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(
      birdNestPosition.longitude,
      birdNestPosition.latitude,
      birdNestPosition.height
    ),
    //方向、俯视和仰视的视角
    orientation: {
      heading: 0.0, // 相机方向，0 为正北
      pitch: Cesium.Math.toRadians(-30), // 俯视角度
      roll: 0.0, // 滚转角度
    },
  })
  
  // 添加点击事件监听
  viewer.screenSpaceEventHandler.setInputAction(function (event:any) {
    const cartesian = viewer.scene.pickPosition(event.position);
      if (Cesium.defined(cartesian)) {
        // 创建一个小红点军标
        const entity = viewer.entities.add({
          position: cartesian,
          point: {
            pixelSize: 10,
            color: Cesium.Color.RED,
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 2,
          },
        });
        //添加飞机
        viewer.entities.add({
          name: "Airplane",
          position: cartesian,
          model: {
            uri: "../../../public/Cesium_Air.glb",
            // 设置飞机的最小像素
            minimumPixelSize: 128,
            // 设置飞机的轮廓
            silhouetteSize: 5,
            // 设置轮廓的颜色
            silhouetteColor: Cesium.Color.WHITE,
            // 设置相机距离模型多远的距离显示
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000),
          },
        })
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
   // 监听点击事件
  //  viewer.screenSpaceEventHandler.setInputAction(function (event:any) {
  //   const cartesian = viewer.scene.pickPosition(event.position);
  //   if (Cesium.defined(cartesian)) {
  //     const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
  //     const imageUrl = "https://img2.baidu.com/it/u=1337068678,3064275007&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=750"; // 图片路径
 
  //     // 创建实体
  //     const entity = viewer.entities.add({
  //       name: 'Picture',
  //       position: cartesian,
  //       billboard: {
  //         image: imageUrl,
  //         scale: 1.0,
  //         verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 根据需要调整
  //       },
  //     });
 
  //     // 可以添加更多属性，如高度、旋转等
  //     if (entity) {
  //       // 实体创建成功后的操作
  //     }
  //   }
  // }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

  


}

</script>
<style scoped>
#cesiumContainer {
  width: 100%;
  height: 800px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>